<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			/* img{
				display: inline-block;
				margin: auto 0;
				
			} */
			/* #background_frame{
				width: 100%;
				height: 100%;
				position: relative;
			} */
			#tit{
				position: absolute;
				top: 40px;
				left: 40px;
				font-size: 75px;
				font-weight: 600;
				color: rgba(0, 96, 144, 0.5);
				font-style: italic;
			}
			.background_pic{
				width: 100%;
				height: 100%;
			}
			#from{
				position: absolute;
				width: 600px;
				height: 480px;
				border: 1px solid black;
				/* top: 50%; */
				/* left: 50%; */
				/* margin-top: -400px; */
				/* margin-left: -240px; */
				background-color: rgba(121, 198, 230, 0.5);
				border-radius: 20px;
				
			}
			#security{
				width: 100px;
				height: 50px;
				border: 1px solid black;
				position: absolute;
				top: 212px;
				left: 390px;
				border-radius: 8px;
				
				
				
			}
			#login{
				width: 400px;
				/* background-color: aquamarine; */
				justify-content: center;
				margin: 60px auto;
				
			}
			#login span{
				display: flex;
				
			}
			#login input{
				font-size: 20px;
				border-radius: 8px;
				
			}
			#select input{
				display: inline-block;
				width: 15px;
				height: 15px;
				
				
				
			}
			
			#two{
				margin-left: 100px;
			}
			
			#select{
				font-size: 20px;
				margin: -30px 150px;
				
			}
			#submit{
				margin: 75px 30px;
			}
			#submit button{
				width: 100px;
				height: 40px;
				font-size: 20px;
				margin-left:120px ;
			}
			
		
		</style>
		<script type="text/javascript" src="./tools.js"></script>
		<script type="text/javascript" src="./jquery-2.1.4/jquery.js"></script>
		
		<script type="text/javascript">
			$(function(){
				//计算居中的top和left值
				var left = $(window).scrollLeft() + ($(window).width() - $("#from").outerWidth(true)) / 2;
				var top = $(window).scrollTop() + ($(window).height() - $("#from").outerHeight(true))/2;
				
				$("#from").css({
					left:left,
					top:top,
				})
				
				$(window).on("scroll resize",function(){
					var left = $(window).scrollLeft() + ($(window).width() - $("#from").outerWidth(true)) / 2;
					var top = $(window).scrollTop() + ($(window).height() - $("#from").outerHeight(true))/2;
					
					$("#from").css({
						left:left,
						top:top,
					})
					
				})
				
			})
			
			
			
			/* window.onload = function(){
				var security_pic = document.getElementById("security_pic");
				security_pic.onclick = function(){
					ajax({
						method:"get",
						success:function(res){
							console.log(res);
						},
						url:"",
						data:"",
					});
				}	
				}
			} */
		</script>
	</head>
	<body>
		<img src="./image/背景03.jpg" class="background_pic">
		<!-- <div id="background_frame"> -->
			
			<p id="tit">成绩查询系统</p>
			<form action="" method="post" id="from" >
				<div id="login">
					<span><img src="./image/account.png" width="50px" height="50px">&nbsp;<input type="text" name="" id="" placeholder="请输入账号" style="width: 400px ; height: 50px;border: 1px solid #000000;" /></span><br>
					<span><img src="./image/password.png" width="50px" height="50px">&nbsp;<input type="password" name="" id="" placeholder="请输入密码" style="width: 400px ; height: 50px;border: 1px solid #000000;"/></span><br>
					<span><img src="./image/security.png" width="50px" height="50px">&nbsp;<input type="text" name="" id="" placeholder="请输入验证码" style="width: 160px ; height: 50px;border: 1px solid #000000;"/></span>
					<span id="security"><img id="security_pic" ></span>
				</div>
				<div id="select"> 			
					<input type="radio" name="" id="" value="教工登录" />教工登录
					<input type="radio" name="" id="two" value="学生登录" />学生登录
				</div>	
				<div id="submit">
					<button type="button">登&nbsp;&nbsp;录</button>
					<button type="button">忘记密码</button>
				</div>
			</form>
			
		<!-- </div> -->
		
	</body>
</html>
